<template>
	<view class="pages">
		<scroll-view scroll-y="true" class="contentbox" @scrolltolower="scrolltolower">
			<view class="search">
				<u--input
					@confirm="handleinput" 
					@clear="handleclear"
					style="background-color: #fff;"
					placeholder="项目名称" 
					prefixIcon="search" 
					shape="circle" 
					:clearable="true" 
					v-model="search"
					prefixIconStyle="font-size: 22px;color: #949292;">
				</u--input>
			</view>

			<view v-if="list.length == 0">
				<view style="height: 100rpx"></view>
				<u-empty text=" - 暂无数据 - " mode="list"></u-empty>
			</view>
			<view class="boxes" v-for="(item, index) in list" :key="index" @click="detail(item.id)">
				<view>工单编号：{{item.id}}</view>
				<view>项目名称：{{item.xmname}}</view>
				<view>维保人员：{{item.userlist}}</view>
				<view>维保类型：{{item.typestr}}</view>
				<view>维保状态：<text>{{item.content}}</text></view>
				<view class="uniFlex">
					电梯位置：
					<text>{{item.address}}</text>
					<img src="@/static/mains/m7.png" alt="" />
				</view>
			</view>
			
			<drag-button :isDock="true" @btnClick="btnClick"/>
		</scroll-view>
	</view>
</template>

<script>
import dragButton from "@/components/drag-button/drag-button.vue";
export default {
	components: {
		dragButton
	},
	data() {
		return {
			search:'',
			page: 1,
			limit: 20,
			length: true,
			list: [
				// { id: 1, type: 1 },
				// { id: 2, type: 2 },
			]
		};
	},
	async onShow() {
		this.page = 1;
		this.list = [];
		await this.getList();
	},
	methods: {
		btnClick() {
			console.log(1111)
			uni.navigateTo({
				url:'/pages/mains/tasks/add'
			})
		},
		// 上拉
		scrolltolower() {
			console.log('触底');
			if (this.length) {
				this.page++;
				this.getList();
			}
		},
		// 搜索
		handleinput(e) {
			console.log(this.search);
			this.page = 1;
			this.list = [];
			this.getList()
		},
		// 清空
		handleclear() {
			console.log('清除');
			this.search = '';
			this.page = 1;
			this.list = [];
			this.getList()
		},
		// 列表
		async getList() {
			let res = await this.$api.wblist({
				xmname:this.search,
				page_no: this.page,
				page_size: this.limit,
			});
			if (res.code == 1) {
				this.length = res.data.lists.length == this.limit;
				this.list.push(...res.data.lists);
			}
		},
		detail(id){
			uni.navigateTo({
				url:'/pages/mains/tasks/detail?id='+id
			})
		}
	}
};
</script>

<style scoped lang="less">
.pages {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.contentbox {
	flex: 1;
	overflow: hidden;
	padding: 20rpx 15rpx;
	.search{
		margin-bottom: 10rpx;
	}
	
	.boxes {
		padding: 30rpx 23rpx;
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		view {
			margin: 10rpx 0;
			white-space: nowrap;
		}
		text {
			color: #1d87cf;
			white-space: normal;
		}
		img {
			width: 31rpx;
			height: 31rpx;
			flex-shrink: 0;
			margin-left: 10rpx;
		}
	}
}
</style>
